import React from 'react';
import styles from './style.css'
import {getHistory, MyMap, uuid} from "../../../util/uitls";
import pageRedux from '../../pageRedux'
import MyIconImage from "../../../component/MyIconImage";
import HeaderNav from "../../../component/HeaderNav";

export class UploadImage extends React.Component {
    constructor(props) {
        super()
        this.state = {
            imageList: []
            /*list item :{
            id:""i
                image:""
            }*/
        }

    }

    componentDidMount() {

    }


    file2imageSrc(file) {
        var image = new window.Image()
        var reader = new FileReader();
        if (file) {
            reader.readAsDataURL(file);
        }
        return new Promise(resolve => {
            reader.addEventListener("load", function () {
                resolve(reader.result)
            }, false);
        })


    }

    isImage(file) {
        return file.type.match("png") || file.type.match("gif")
    }

    async file_upload(e) {
        var lists = this.props.getStore("image.lists")
        if (lists.length > 9) return false
        var files = e.target.files
        for (var i = 0; i < files.length && i < 9; i++) {
            var isTrue = this.isImage(files[i])
            if (isTrue) {
                var image = await  this.file2imageSrc(files[i])

                lists.push({image: image, id: uuid()})
                await  this.props.setStore("image.lists", lists)
            }

        }
    }

    deleteImage(image) {
        var lists = this.props.getStore("image.lists")
        var index = null
        MyMap(lists, (item, _index) => {
            if (item.id == image.id) {
                index = _index
            }
        })
        lists.splice(index, 1)
        this.props.setStore("image.lists", lists)
    }

    render() {
        var self = this
        var lists = this.props.getStore("image.lists")
        return <div title="添加">
            <div className={styles.body}>
                <div className={styles.imageWrappper}>
                    {
                        MyMap(lists, image => {
                            return <div className={styles.imageItem} key={uuid()}>
                                <img src="http://pj5qx5lsj.bkt.clouddn.com/eglass-close%20(1).png" alt=""
                                     className={styles.close}
                                     onClick={self.deleteImage.bind(self, image)}
                                />
                                <img src={image.image} className={styles.img_main} alt=""/>
                            </div>
                        })
                    }

                    <div className={styles.imageItem}>
                        <input type="file" onChange={this.file_upload.bind(this)} multiple={true} style={{opacity: 0}}/>
                        <img src="http://pj5qx5lsj.bkt.clouddn.com/add.png" alt="" className={styles.img_main}/>
                    </div>
                </div>

            </div>

        </div>
    }
}

UploadImage.defaultProps = {}

export default pageRedux(UploadImage)